// import { useSearchParams, useNavigate } from 'react-router'
// import { NavBar } from 'react-vant';
// import { Search } from '@react-vant/icons'
// import styles from './index.module.less'
// import { useEffect, useState } from 'react';
// import axios from '@/api'
// import { formatDate } from '@/utils'
// // import Pull from '@/pull'
// import PullRefresh from '@/pull'
// import toast from 'react-hot-toast'
// import { createFromIconfontCN } from '@react-vant/icons'

// // const xh = require('../../assets/xh.jpg')
// import xh from '@/assets/xh.jpg'
// import xh1 from '@/assets/8.jpg'


// export default function NoteList() {
//     const IconFont = createFromIconfontCN('//at.alicdn.com/t/c/font_4986959_y05fndq2ull.js')
//     const [searchParams] = useSearchParams()
//     const memory = searchParams.get('memory')
//     const navigate = useNavigate()
//     const [noteList, setNoteList] = useState([])

//     useEffect(() => {
//         axios.get(`findNoteListByType?type=${memory}`).then(res => {
//             console.log(res)
//             setNoteList(res.data)
//             toast.success('查询成功')
//         }).catch(err => {
//             console.log('查询失败', err);
//             setNoteList([])
//             // toast.error('查询失败')
//         })
//     }, [memory])

//     const onRefresh = () => {
//         axios.get(`findNoteListByType?type=${memory}`).then(res => {
//             console.log("刷新")
//             setNoteList(res.data)
//             toast.success('查询成功')
//         }).catch(err => {
//             console.log('查询失败', err);
//             setNoteList([])
//             // toast.error('查询失败')
//         })
//     }

//     return (
//         <div className={styles['note-list']}>
//             <header className={styles['header']}>
//                 <NavBar
//                     title={memory}
//                     leftText="返回"
//                     rightText={<Search fontSize={20} />}
//                     onClickLeft={() => navigate(-1)}
//                     onClickRight={() => { }}
//                 />
//             </header>
//             <PullRefresh onRefresh={onRefresh}>
//                 <section className={styles['section']}>
//                     <ul>
//                         {
//                             noteList.map(item => (
//                                 <li key={item.id} onClick={() => navigate(`/noteDetail?id=${item.id}`)}>
//                                     <div className={styles['img']}>
//                                         <img width={100} src={xh1} />
//                                     </div>
//                                     <div className={styles['time']}>{formatDate(item.create_time)}</div>
//                                     <div className={styles['title']}>{item.title}</div>
//                                 </li>
//                             ))
//                         }

//                     </ul>
//                 </section>
//             </PullRefresh>
//             <IconFont name='icon-zengjiatianjiajiahao' className={styles['add']} onClick={() => {
//                 navigate('/noteAdd?memory=' + memory)
//             }} />
//         </div>
//     )
// }


import { useSearchParams, useNavigate } from 'react-router'
import { NavBar } from 'react-vant';
import { Search } from '@react-vant/icons'
import styles from './index.module.less'
import { useEffect, useState } from 'react';
import axios from '@/api'
import { formatDate } from '@/utils'
// import Pull from '@/pull'
import PullRefresh from '@/pull'
import toast from 'react-hot-toast'
import { createFromIconfontCN } from '@react-vant/icons'

// const xh = require('../../assets/xh.jpg')
import xh from '@/assets/xh.jpg'
import xh1 from '@/assets/8.jpg'


export default function NoteList() {
    const IconFont = createFromIconfontCN('//at.alicdn.com/t/c/font_4986959_y05fndq2ull.js')
    const [searchParams] = useSearchParams()
    const memory = searchParams.get('memory')
    const navigate = useNavigate()
    const [noteList, setNoteList] = useState([])

    useEffect(() => {
        axios.get(`findNoteListByType?type=${memory}`).then(res => {
            console.log(res)
            setNoteList(res.data)
            toast.success('查询成功')
        }).catch(err => {
            console.log('查询失败', err);
            setNoteList([])
            // toast.error('查询失败')
        })
    }, [memory])

    const onRefresh = () => {
        axios.get(`findNoteListByType?type=${memory}`).then(res => {
            console.log("刷新")
            setNoteList(res.data)
            toast.success('查询成功')
        }).catch(err => {
            console.log('查询失败', err);
            setNoteList([])
            // toast.error('查询失败')
        })
    }

    const getImageUrl = (item) => {
        try {
            // 如果没有 imges 字段，使用默认图片
            if (!item.images) {
                return xh1;
            }

            // 如果 imges 是字符串，需要解析为JSON
            const images = typeof item.images === 'string' ? JSON.parse(item.images) : item.images;

            // 检查是否是数组格式
            if (Array.isArray(images) && images.length > 0) {
                return images[0].url || xh1;
            }

            // 检查是否是对象格式
            if (images && typeof images === 'object' && images.url) {
                return images.url;
            }

            return xh1; // 如果都不匹配，使用默认图片
        } catch (error) {
            console.log('解析图片数据失败:', error);
            return xh1; // 解析失败时使用默认图片
        }
    }

    return (
        <div className={styles['note-list']}>
            <header className={styles['header']}>
                <NavBar
                    title={memory}
                    leftText="返回"
                    rightText={<Search fontSize={20} />}
                    onClickLeft={() => navigate(-1)}
                    onClickRight={() => { }}
                />
            </header>
            <PullRefresh onRefresh={onRefresh}>
                <section className={styles['section']}>
                    <ul>
                        {
                            noteList.map(item => (
                                <li key={item.id} onClick={() => navigate(`/noteDetail?id=${item.id}`)}>
                                    <div className={styles['img']}>
                                        <img
                                            width={100}
                                            src={getImageUrl(item)}
                                            alt={item.title || '笔记图片'}
                                            onError={(e) => {
                                                // 图片加载失败时使用默认图片
                                                e.target.src = xh1;
                                            }}
                                        />
                                    </div>
                                    <div className={styles['time']}>{formatDate(item.create_time)}</div>
                                    <div className={styles['title']}>{item.title}</div>
                                </li>
                            ))
                        }
                    </ul>
                </section>
            </PullRefresh>
            <IconFont name='icon-zengjiatianjiajiahao' className={styles['add']} onClick={() => {
                navigate('/noteAdd?memory=' + memory)
            }} />
        </div>
    )
}